<template>
	<view class="container-withdraw">
		<view class="withdraw-view">
			<view class="lang-top">
				<view class="backIcon" @click="back()">
					<uni-icons type="left" size="26" color="#fff"></uni-icons>
				</view>
				<view class="langText">
					{{$t('账户提现')}}
				</view>
				<view class="clearView"></view>
			</view>
		</view>
		<view class="content-view">
			<view class="available-balance-view">
				<p class="available-balance">$<span>{{user.balance}}</span></p>
				<p class="balance-text">{{$t('我的可用余额')}}</p>
			</view>
		</view>
		<view class="available-balance-list">
			<view class="available-purse">
				{{$t('提现钱包')}}
			</view>
			<view v-if="acdata.id" class="available-purse-list" @click="open">
				<span>{{acdata.cradnum}}</span><uni-icons type="right" size="18" color="#999"></uni-icons>
			</view>
			<view v-else class="available-purse-list" @click="open">
				<span>{{$t('请选择钱包')}}</span><uni-icons type="right" size="18" color="#999"></uni-icons>
			</view>
		</view>
		<view class="withdraw_wrap">
			<p class="withdraw_wrap_text">{{$t('提现金额')}}</p>
			<view class="flex_center">
				<span class="sign">$</span>
				<input type="number" step="0.01" v-model="num" :placeholder="$t('可提现金额')+'$'+user.balance" class="inp">
				<span></span>
			</view>
		</view>
		<view class="withdraw-tips">
			<p>{{$t('提现由系统自动审核处理，预计到账时间30分钟内，请耐心等待')}}！!</p>
		</view>
		<view class="basic_btn" @click="tx">
			{{$t('提交')}}
		</view>
		<view>
			<uni-popup ref="popup" type="bottom">
				<view class="sheet-description-view">
					<p class="sheet-description">{{$t('请选择钱包')}}</p>
					<view class="addPurse" @click="addPurse">
						{{$t('添加新的提现钱包')}}
					</view>
					<view class="addPurse2" @click="xuanzhe(item)" v-for="(item,index) in banklist">
						{{item.cradnum}}
					</view>
				</view>
				
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				user:{},
				banklist:[],
				acdata:{},
				num:''
			}
		},
		onShow() {
			this.getinfo()
			this.getlist()
		},
		methods:{
			xuanzhe(data){
				this.acdata = data
				this.gb()
			},
			tx(){
				let data = {
					num:this.num,
					bank_id:this.acdata.id
				}
				this.$http.post(
					'api/Withdrawal/create',//接口名
					data,//参数合集
				).then(res=>{
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					setTimeout(function(){
						uni.switchTab({
							url:'/pages/my/index'
						})
					},1500)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			getinfo(){
				this.$http.get(
					'api/user/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.user = res.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			getlist(){
				this.$http.get(
					'api/MemberBank/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.banklist = res.data.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			back(){
				uni.navigateBack({
				    delta: 1 // delta值为1时表示返回上一级页面
				});
			},
			open(){
			    this.$refs.popup.open('bottom')
			},
			gb(){
			    this.$refs.popup.close('bottom')
			},
			addPurse(){
				uni.navigateTo({
					url:'/pages/index/addPurse'
				})
			},
		}
	}
</script>

<style scoped>
	.container-withdraw{
		background-color: #f6f6f6;
	}
	.lang-top{
		display: flex;
		padding-left:10rpx;
		height:88rpx;
		line-height:88rpx;
		background-color: #3775f4;
		color:#fff;
	}
	.backIcon{
		width:20%;
	}
	.langText{
		font-size:36rpx;
		width:60%;
		text-align: center;
		
	}
	.clearView{
		width:20%;
	}
	.content-view{
		background: #fff;
		margin-left: 2%;
		margin: 20rpx;
		border-radius:12rpx;
	}
	.available-balance-view{
		background: #fff;
		padding: 40rpx 0;
		font-size:24rpx;
		text-align: center;
		border-radius:12rpx;
		margin-top:-120rpx;
	}
	.content-view>p{
		line-height:40rpx;
	}
	.withdraw-view{
		height: 252rpx;
		background: #3775f4;
	}
	.available-balance{
		font-size: 48rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
		height:52rpx;
		line-height: 52rpx;
	}
	.balance-text{
		color: #999;
		font-weight: 700;
		font-size: 24rpx;
	}
	.available-balance-list{
		box-shadow: none;
		background: none;
		background-color: #fff;
		margin:20rpx;
		padding:40rpx;
		display: flex;
		border-radius: 12rpx;
	}
	.available-purse-list{
		height:36rpx;
		line-height: 36rpx;
		
	}
	.available-purse-list>span{
		font-size: 32rpx;
		font-weight: 700;
		color: #999;
	}
	.available-purse{
		flex:1;
		font-size: 32rpx;
		font-weight: 700;
		color: #999;
	}
	
	.withdraw_wrap{
		background: #fff;
		border-radius: 12rpx;
		padding: 32rpx 40rpx;
		margin: 20rpx;
	}
	.withdraw_wrap_text{
		font-size: 32rpx;
		font-weight: 700;
		color: #999;
		margin-bottom: 40rpx;
		height:32rpx;
		line-height: 32rpx;
	}
	.flex_center {
	    display: flex;
	    justify-content: left;
	    align-items: center;
		margin-bottom: 40rpx;
	}
	.sign{
	    font-size: 36rpx;
	    margin-right: 20rpx;
	    font-weight: 700;
	}
	.inp{
	    height: 36rpx;
	    width: 60%;
	    line-height: 36rpx;
	    font-size: 28rpx;
	}
	.withdraw-tips{
		padding: 0 32rpx 28rpx 32rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #f12211;
	}
	.basic_btn {
		margin: 106rpx auto 0 auto;
		background: #0a5;
	    height: 90rpx;
	    line-height: 90rpx;
	    font-size: 32rpx;
	    width: 90%;
	    border-radius: 46rpx;
	    color: #fff;
	    text-align: center;
	}
	.sheet-description-view{
		background-color: #fff;
		padding-bottom: 30rpx;
	}
	.sheet-description{
		padding:40rpx 32rpx;
		color: #969799;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
	}
	.addPurse{
		color:red;
		padding: 28rpx 32rpx;
		font-size: 32rpx;
	}
	.addPurse2{
		color:#ccc;
		padding: 28rpx 32rpx;
		font-size: 32rpx;
	}
</style>